<template>
    <div class="yorha-normal-button-group">
        <div class="lefter" v-show="showLeft">
            <div class="one"></div>
            <div class="two"></div>
        </div>
        <div class="btns">
            <yorha-button v-for="(active, text) in thisButtons"
                                 @click="type=='checkBox'?checkBoxClick(text):radioClick(text)"
                                 :active="active">{{text}}</yorha-button>
        </div>
    </div>
</template>



<script setup>
import YorhaButton from "../YorhaButton/YorhaButton.vue";
import {reactive} from "vue";
let props = defineProps(['buttons','direction','type', 'showLeft'])
let emits = defineEmits(['click'])
let thisButtons = reactive(props.buttons)
let checkBoxSelect = []

/*
* 作为单选框模式时候的点击事件
* */
function radioClick(text) {
    for (let item in thisButtons) {
        if (item===text) thisButtons[item] = true
        else thisButtons[item] = false
    }
    clickHandler(text)
}

/*
* 作为多选框模式的点击事件
* */
function checkBoxClick(text) {
    checkBoxSelect.length = 0
    for (let item in thisButtons) {
        if (item===text) thisButtons[item] = !thisButtons[item]
        if (thisButtons[item]) {
            checkBoxSelect.push(item)
        }
    }
    clickHandler(checkBoxSelect)
}

function clickHandler(contain) {
    emits('click', contain)
}
</script>

<script>
export default {
    name:"YorhaButtonGroup"
}
</script>

<style lang="less" scoped>
@import "../../style";
.yorha-normal-button-group {
    display: flex;
    height: auto;
    &>.lefter {
        width: 20px;
        height: auto;
        display: flex;
        &>.one {
            width: 10px;
            height: 100%;
            background: @darkYellow;
        }
        &>.two {
            margin-left: 5px;
            width: 5px;
            height: 100%;
            background: @darkYellow;
        }
    }

    &>.btns {
        width: auto;
        height: auto;
        display: flex;
        flex-direction: column;
    }
}
</style>